Tengo dos conjuntos de JSON, Set 1 y Set 2 . El conjunto 1 ( sizingData ) se asigna a campos de texto como este:
const fillTextField = () => { let result = []; var keys = Object.keys(sizingHistory); keys.forEach(function (key) { result.push(sizingHistory[key]); }); return( {result?.map((data) => { return ( <TextField variant="outlined" value={data} /> ); })} ) } Quiero mapear el Conjunto 2 ( sizingHistory ) de manera similar, pero obtengo [Object Object] en textField en lugar de SizingId & SizingComments . Este es mi intento de mapear sizinhHistory :
const [sizingHistory, setSizingHistory] = useState(""); const fillHistoryTextField = () => { let result = []; var keys = Object.keys(sizingHistory["sizinghistory"]); keys.forEach(function (key) { result.push(sizingHistory["sizinghistory"][key]); }); return ( {result?.map((data) => { return ( <TextField variant="outlined" value={data} /> ); })} ) }Serie 1
{ "SizingId": 20448, "SizingComments": "This is a comment", }conjunto 2
{ "sizinghistory" : [ "SizingId" : 20448, "SizingComments": "Old Comment", ] } La función de búsqueda para sizingData y sizingHistory se llama en sus propias funciones handleOpen . UseEffect no se puede usar en este caso, ya que los datos solo se muestran cuando un usuario selecciona una fila en una tabla que contiene un SizingId .
Tiene [objeto de objeto] ya que JS está convirtiendo un objeto en una cadena en Set2 , esto sucede porque data.seizingHistory es una matriz y tiene que iterar a través de él y luego a través de las claves del objeto interior para obtener todos los datos en las entradas de texto .
Esto debería darte lo que necesitas
const [sizingHistory, setSizingHistory] = useState(""); const fillHistoryTextField = () => { let result = []; (sizingHistory["sizinghistory"]).forEach(element => { const keys = Object.keys(element); keys.forEach(function (key) { result.push(element[key]); }); }); return ( {result?.map((data) => { return ( <TextField variant="outlined" value={data} /> ); })} ) }